<template>
  <div >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="goods-list"
      offset=0
    >
      <div class="goods-list-item" v-for="(item,index) in goods" :key="index">
        <div class="box-img">
          <img v-lazy="item.img_url" alt="" @click="godetail('/home/goodsinfo',item.id)">
        </div>
        <div class="title">{{item.title}}</div>
        <div class="prcire">${{item.sell_price}}</div>
        <div class="info">
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageNo:0,
      pageSize:4,
      goods:[],
      loading: false,
      finished: false,
      count:0
    }
  },
  methods:{
    async getGoods () {
      ++this.pageNo
      const res = await this.$http.getGoods({ pageNo:this.pageNo, pageSize:this.pageSize })
      this.goods = this.goods.concat(res.data.message)
      console.log(this.goods)
      this.count = res.data.count
    },
    async onLoad () {
      // setTimeout(async () => {
      await this.getGoods()
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      console.log(this.count)
      if (this.goods.length >= this.count) {
        this.finished = true
      }
      // }, 1000)
    }
  }
}
</script>
<style lang="scss" >
.goods-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .goods-list-item{
    border: 1px solid rgb(224, 223, 223);
    margin: 10px 10px 0px;
    box-sizing: border-box;
    width: 44%;
    // text-align: center;
    .box-img{
      width: 160px;
      height: 160px;
      padding: 5px;
      box-sizing: border-box;
      text-align: center;
      img{
        width: 148px;
        height: 148px;
      }
    }
    .title{
      font-size: 16px;
      font-weight: 600;
      margin: 5px;
    }
    .prcire{
      font-size: 16px;
      color: red;
      margin-left:5px ;
      font-weight: 600;
      padding: 5px;
    }
    .info{
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      padding: 5px 5px 10px;
     span{
       color:rgb(236, 37, 37) ;
        border: 1px solid rgb(236, 37, 37);
        border-radius: 7px;
        padding:1px 3px;
     }
    }
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading{
    width: 100%;
  }
}
</style>
